{extend name="public:layoutnhq" /}
{block name="title"}{$webConfig['WEBNAME']}-农化圈商品列表页{/block}
{block name="head"}
<script type="text/javascript" src="/public/plugins/timedown/jquery.yomi.js"></script>
{/block}
{block name="body"}
{include file="public_header_nhq"/}
<div class="goods-list-mainbox g-container">
    <div class="left">
        <div class="mc-goods-screen">
            <div class="current">
                <div class="location">
                    <a href="javascript:;">首页</a> &gt;
                    <a href="javascript:;">原药</a> &gt;
                    <a href="javascript:;">除草剂</a>
                </div>
                <div class="screen-block">
                    <span class="tit">分类：</span>
                    <span class="con">无机化学,有机化学品,石油化学品</span>
                </div>
                <div class="screen-block">
                    <span class="tit">品牌：</span>
                    <span class="con">麦克林,迈瑞尔,研峰</span>
                </div>
            </div>
            <div class="items">
                <div class="screen-item">
                    <div class="tit">
                        分类
                    </div>
                    <div class="screen-box">
                        <a href="javascript:;" class="item">全部</a>
                        <a href="javascript:;" class="item">无机化学品</a>
                        <a href="javascript:;" class="item">有机化学品</a>
                        <a href="javascript:;" class="item">石油化学品</a>
                    </div>
                </div>
                <div class="screen-item">
                    <div class="tit">
                        品牌
                    </div>
                    <div class="screen-box">
                        <a href="javascript:;" class="item">全部</a>
                        <a href="javascript:;" class="item">aladdin</a>
                        <a href="javascript:;" class="item">麦克林</a>
                        <a href="javascript:;" class="item">罗恩</a>
                        <a href="javascript:;" class="item">迈瑞尔</a>
                        <a href="javascript:;" class="item">fisher</a>
                        <a href="javascript:;" class="item">Adamas</a>
                        <a href="javascript:;" class="item">J&K</a>
                        <a href="javascript:;" class="item">研峰</a>
                        <a href="javascript:;" class="item">西亚</a>
                        <a href="javascript:;" class="item">源叶</a>
                        <a href="javascript:;" class="item">笛柏</a>
                        <a href="javascript:;" class="item">安耐吉</a>
                        <a href="javascript:;" class="item">达瑞</a>
                        <a href="javascript:;" class="item">沪试</a>
                        <a href="javascript:;" class="item">TRC</a>
                        <a href="javascript:;" class="item">Greagent</a>
                        <a href="javascript:;" class="item">AccuStandard</a>
                        <a href="javascript:;" class="item">九鼎</a>
                        <a href="javascript:;" class="item">Amethyst</a>
                        <a href="javascript:;" class="item">TCI</a>
                        <a href="javascript:;" class="item">沃凯</a>
                        <a href="javascript:;" class="item">韶远</a>
                        <a href="javascript:;" class="item">VHG</a>
                        <a href="javascript:;" class="item">欣诺科</a>
                    </div>
                    <div class="screen-checkbox mc-avg-6 avg-margin-10">
                        <label class="item"><input type="checkbox" value="" class="checkclass" name="screen_name">aladdin</label>
                        <label class="item"><input type="checkbox" value="" class="checkclass" name="screen_name">麦克林</label>
                        <label class="item"><input type="checkbox" value="" class="checkclass" name="screen_name">罗恩</label>
                        <label class="item"><input type="checkbox" value="" class="checkclass" name="screen_name">迈瑞尔</label>
                        <label class="item"><input type="checkbox" value="" class="checkclass" name="screen_name">fisher</label>
                        <label class="item"><input type="checkbox" value="" class="checkclass" name="screen_name">Adamas</label>
                        <label class="item"><input type="checkbox" value="" class="checkclass" name="screen_name">J&K</label>
                        <label class="item"><input type="checkbox" value="" class="checkclass" name="screen_name">研峰</label>
                        <label class="item"><input type="checkbox" value="" class="checkclass" name="screen_name">西亚</label>
                        <label class="item"><input type="checkbox" value="" class="checkclass" name="screen_name">源叶</label>
                        <label class="item"><input type="checkbox" value="" class="checkclass" name="screen_name">笛柏</label>
                        <label class="item"><input type="checkbox" value="" class="checkclass" name="screen_name">安耐吉</label>
                        <label class="item"><input type="checkbox" value="" class="checkclass" name="screen_name">达瑞</label>
                        <label class="item"><input type="checkbox" value="" class="checkclass" name="screen_name">沪试</label>
                        <label class="item"><input type="checkbox" value="" class="checkclass" name="screen_name">TRC</label>
                        <label class="item"><input type="checkbox" value="" class="checkclass" name="screen_name">Greagent</label>
                        <label class="item"><input type="checkbox" value="" class="checkclass" name="screen_name">AccuStandard</label>
                        <label class="item"><input type="checkbox" value="" class="checkclass" name="screen_name">九鼎</label>
                        <label class="item"><input type="checkbox" value="" class="checkclass" name="screen_name">Amethyst</label>
                        <label class="item"><input type="checkbox" value="" class="checkclass" name="screen_name">TCI</label>
                        <label class="item"><input type="checkbox" value="" class="checkclass" name="screen_name">沃凯</label>
                        <label class="item"><input type="checkbox" value="" class="checkclass" name="screen_name">韶远</label>
                        <label class="item"><input type="checkbox" value="" class="checkclass" name="screen_name">VHG</label>
                        <label class="item"><input type="checkbox" value="" class="checkclass" name="screen_name">欣诺科</label>
                        <div class="f-cb"></div>
                        <div class="action">
                            <a href="javascript:;" class="action-btn confirm">确定</a>
                            <a href="javascript:;" class="action-btn cancel">取消</a>
                        </div>
                    </div>
                    <a href="javascript:;" class="select-more">多选</a>
                </div>
                <div class="screen-item">
                    <div class="tit">
                        纯度
                    </div>
                    <div class="screen-box">
                        <a href="javascript:;" class="item">全部</a>
                        <a href="javascript:;" class="item">99%</a>
                        <a href="javascript:;" class="item">98%</a>
                        <a href="javascript:;" class="item">95%</a>
                        <a href="javascript:;" class="item">99.5%</a>
                        <a href="javascript:;" class="item">AR</a>
                        <a href="javascript:;" class="item">97%</a>
                        <a href="javascript:;" class="item">99.9%</a>
                        <a href="javascript:;" class="item">对照品</a>
                        <a href="javascript:;" class="item">99.99%</a>
                        <a href="javascript:;" class="item">metals</a>
                        <a href="javascript:;" class="item">N/A</a>
                    </div>
                    <div class="screen-checkbox mc-avg-6 avg-margin-10">
                        <label class="item"><input type="checkbox" class="checkclass" name="screen_name2" value="">99%</label>
                        <label class="item"><input type="checkbox" class="checkclass" name="screen_name2" value="">98%</label>
                        <label class="item"><input type="checkbox" class="checkclass" name="screen_name2" value="">95%</label>
                        <label class="item"><input type="checkbox" class="checkclass" name="screen_name2" value="">99.5%</label>
                        <label class="item"><input type="checkbox" class="checkclass" name="screen_name2" value="">AR</label>
                        <label class="item"><input type="checkbox" class="checkclass" name="screen_name2" value="">97%</label>
                        <label class="item"><input type="checkbox" class="checkclass" name="screen_name2" value="">99.9%</label>
                        <label class="item"><input type="checkbox" class="checkclass" name="screen_name2" value="">对照品</label>
                        <label class="item"><input type="checkbox" class="checkclass" name="screen_name2" value="">99.99%</label>
                        <label class="item"><input type="checkbox" class="checkclass" name="screen_name2" value="">metals</label>
                        <label class="item"><input type="checkbox" class="checkclass" name="screen_name2" value="">N/A</label>
                        <div class="f-cb"></div>
                        <div class="action">
                            <a href="javascript:;" class="action-btn confirm">确定</a>
                            <a href="javascript:;" class="action-btn cancel">取消</a>
                        </div>
                    </div>
                    <a href="javascript:;" class="select-more">多选</a>
                </div>
            </div>
        </div>
        <div class="mc-sort-box">
            <div class="sort-action">
                <!--好像综合和销量没有升序的需求，只按照降序来排-->
                <a href="javascript:;" class="sort-btn">综合排序</a>
                <a href="javascript:;" class="sort-btn">销量排序</a>
                <!--价格升序样式asc 降序样式desc-->
                <a href="javascript:;" class="sort-btn active asc">价格排序 <span class="iconfont icon-sanjiaojiantoutriangular"></span></a>
            </div>
            <label for="stock" class="stock"><input type="checkbox" id="stock"> 现货</label>
            <form class="pure-form mu-form">
                <div class="pure-control-group">
                    <label class="group-tit" class="group-tit">价格区间</label>
                    <input type="text" name="consignee" placeholder="">
                    <span class="spill">-</span>
                    <input type="text" name="consignee" placeholder="">
                    <button type="submit" class="pure-button pure-button-default">确定</button>
                </div>
            </form>
            <div class="total-info">
                总计<span class="num">1002</span>商品
            </div>
        </div>
        <div class="goods-list mc-avg-4 avg-margin-10">
            <div class="item">
                <div class="mc-goods-item2">
                    <a href="javascript:;" class="link"></a>
                    <div class="img-thumb">
                        <img src="../static/nhq_img/cp001.jpg" alt="">
                    </div>
                    <div class="goodsname">
                        C6金品醇酸磁漆长江漆 工业漆 金属漆 磁漆 防腐漆 油漆 涂料
                    </div>
                    <div class="pricebox">
                        ￥<b class="goods-price">359.00</b>/桶
                    </div>
                     <div class="goods-list-action">
                        <a href="javascript:;" class="btn"><span class="iconfont icon-iconfontsvg14"></span> 加入收藏</a>
                        <a href="javascript:;" class="btn"><span class="iconfont icon-jiarugouwuche"></span> 加入购物车</a>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="mc-goods-item2">
                    <a href="javascript:;" class="link"></a>
                    <div class="img-thumb">
                        <img src="../static/nhq_img/cp001.jpg" alt="">
                    </div>
                    <div class="goodsname">
                        C6金品醇酸磁漆长江漆 工业漆 金属漆 磁漆 防腐漆 油漆 涂料
                    </div>
                    <div class="pricebox">
                        ￥<b class="goods-price">359.00</b>/桶
                    </div>
                     <div class="goods-list-action">
                        <a href="javascript:;" class="btn"><span class="iconfont icon-iconfontsvg14"></span> 加入收藏</a>
                        <a href="javascript:;" class="btn"><span class="iconfont icon-jiarugouwuche"></span> 加入购物车</a>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="mc-goods-item2">
                    <a href="javascript:;" class="link"></a>
                    <div class="img-thumb">
                        <img src="../static/nhq_img/cp001.jpg" alt="">
                    </div>
                    <div class="goodsname">
                        C6金品醇酸磁漆长江漆 工业漆 金属漆 磁漆 防腐漆 油漆 涂料
                    </div>
                    <div class="pricebox">
                        ￥<b class="goods-price">359.00</b>/桶
                    </div>
                     <div class="goods-list-action">
                        <a href="javascript:;" class="btn"><span class="iconfont icon-iconfontsvg14"></span> 加入收藏</a>
                        <a href="javascript:;" class="btn"><span class="iconfont icon-jiarugouwuche"></span> 加入购物车</a>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="mc-goods-item2">
                    <a href="javascript:;" class="link"></a>
                    <div class="img-thumb">
                        <img src="../static/nhq_img/cp001.jpg" alt="">
                    </div>
                    <div class="goodsname">
                        C6金品醇酸磁漆长江漆 工业漆 金属漆 磁漆 防腐漆 油漆 涂料
                    </div>
                    <div class="pricebox">
                        ￥<b class="goods-price">359.00</b>/桶
                    </div>
                     <div class="goods-list-action">
                        <a href="javascript:;" class="btn"><span class="iconfont icon-iconfontsvg14"></span> 加入收藏</a>
                        <a href="javascript:;" class="btn"><span class="iconfont icon-jiarugouwuche"></span> 加入购物车</a>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="mc-goods-item2">
                    <a href="javascript:;" class="link"></a>
                    <div class="img-thumb">
                        <img src="../static/nhq_img/cp001.jpg" alt="">
                    </div>
                    <div class="goodsname">
                        C6金品醇酸磁漆长江漆 工业漆 金属漆 磁漆 防腐漆 油漆 涂料
                    </div>
                    <div class="pricebox">
                        ￥<b class="goods-price">359.00</b>/桶
                    </div>
                     <div class="goods-list-action">
                        <a href="javascript:;" class="btn"><span class="iconfont icon-iconfontsvg14"></span> 加入收藏</a>
                        <a href="javascript:;" class="btn"><span class="iconfont icon-jiarugouwuche"></span> 加入购物车</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="right">
        <div class="row">
            <div class="row-tit">
                热销产品
            </div>
            <div class="row-main">
                <div class="mc-goods-item4">
                    <a href="javascript:;" class="link"></a>
                    <div class="img-thumb">
                        <img src="../static/nhq_img/cp002.jpg" alt="">
                    </div>
                    <div class="goodsname">
                        C6金品醇酸磁漆长江漆 工业漆 金属漆 磁漆 防腐漆 油漆 涂料
                    </div>
                    <div class="pricebox">
                        ￥<b class="goods-price">359.00</b>/桶
                    </div>
                </div>
                <div class="mc-goods-item4">
                    <a href="javascript:;" class="link"></a>
                    <div class="img-thumb">
                        <img src="../static/nhq_img/cp003.jpg" alt="">
                    </div>
                    <div class="goodsname">
                        C6金品醇酸磁漆长江漆 工业漆 金属漆 磁漆 防腐漆 油漆 涂料
                    </div>
                    <div class="pricebox">
                        ￥<b class="goods-price">359.00</b>/桶
                    </div>
                </div>
                <div class="mc-goods-item4">
                    <a href="javascript:;" class="link"></a>
                    <div class="img-thumb">
                        <img src="../static/nhq_img/cp004.jpg" alt="">
                    </div>
                    <div class="goodsname">
                        C6金品醇酸磁漆长江漆 工业漆 金属漆 磁漆 防腐漆 油漆 涂料
                    </div>
                    <div class="pricebox">
                        ￥<b class="goods-price">359.00</b>/桶
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>
{include file="public_footer"/}
{/block}
{block name="script"}
<script type="text/javascript">
   $(function () {
       /*循环筛选项，超出一行设置隐藏，加展开按钮*/
       $('.screen-box').each(function () {
           var height=$(this).height();
           var html='<a href="javascript:;" class="screen-item-more"><span class="iconfont icon-sanjiaojiantoutriangular"></span></a>';
           if(height>24){
               $(this).addClass('item-hidden');
               $(this).after(html);
           }
       });
   });
   /*展开按钮单击事件*/
   $(document).on('click', '.screen-item-more', function(e){
       var obj=$(this).prev();
       if($(this).hasClass("rotate")){
           $(this).removeClass('rotate');
           obj.addClass('item-hidden');
       }else{
           $(this).addClass('rotate');
           obj.removeClass('item-hidden');
       }
   })
    /*多选单选切换*/
    $('.select-more').click(function () {
        var text=$(this).text();
        var obj=$(this).parent('.screen-item');
        if(text=='多选'){
            /*先隐藏其他多选框*/
            $('.screen-box').show();
            $('.screen-checkbox').hide();
            $('.select-more').empty().text('多选')
            /*隐藏当前单选，显示当前多选*/
            obj.find('.screen-box').hide();
            obj.find('.screen-checkbox').show();
            $(this).empty().text('单选');
        }else{
            obj.find('.screen-box').show();
            obj.find('.screen-checkbox').hide();
            $(this).empty().text('多选');
        }
    })
</script>
{/block}
